<template>
  <div class="boxContent">
    <div class="appBox">
      <div class="searchList">
        <el-form :model="state.params"
                 ref="FormInstance "
                 class="boxFrom">
          <div class="searchBox">
            <template v-for="(item, index) in state.totalInputColumns"
                      :key="index">
              <el-form-item v-if="item.type == 'input'">
                <el-input v-model="state.params[item.key]"
                          clearable
                          :placeholder="item.label"></el-input>
              </el-form-item>
              <el-form-item v-if="item.type == 'select'">

                <el-cascader v-model="state.params[item.key]"
                             :options="state.propsCity"
                             :props="state.props"
                             :placeholder="item.label"
                             clearable
                             v-if="item.key == 'cityArr'" />
                <el-select v-model="state.params[item.key]"
                           :placeholder="item.label"
                           clearable
                           v-if="item.key == 'position'">
                  <el-option />
                </el-select>
              </el-form-item>
              <el-form-item v-if="item.type == 'time'">
                <el-date-picker v-model="state.params[item.key]"
                                type="daterange"
                                value-format="YYYY-MM-DD"
                                start-placeholder="开始日期"
                                range-separator="至"
                                end-placeholder="结束日期"
                                :placeholder="item.label" />
              </el-form-item>
            </template>
          </div>

          <el-form-item class="btns">

            <el-button v-preventReClick
                       type="primary"
                       plain
                       @click="methods.handleAction('query')">搜索</el-button>
            <el-button v-preventReClick
                       @click="methods.handleAction('reset')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tabaleBox">
        <el-table :data="state.tableData"
                  style="width: 100%"
                  border
                  v-loading="state.loading"
                  :header-cell-style="{color:'#000'}">
          <el-table-column prop="departTime"
                           label="离职时间"
                           show-overflow-tooltip
                           align="center"
                           width="160" />
          <el-table-column prop="name"
                           label="姓名/昵称"
                           show-overflow-tooltip
                           align="center"
                           width="100" />
          <el-table-column prop="sex"
                           label="性别"
                           show-overflow-tooltip
                           align="center"
                           width="80">
            <template #default="scope">
              <span v-if="scope.row.sex == 1">女</span>
              <span v-if="scope.row.sex == 2">男</span></template>
          </el-table-column>
          <el-table-column prop="age"
                           label="年龄"
                           show-overflow-tooltip
                           align="center"
                           width="60" />
          <el-table-column prop="phone"
                           label="手机号"
                           show-overflow-tooltip
                           align="center"
                           width="120" />
          <el-table-column prop="resideCityId"
                           label="所在城市"
                           show-overflow-tooltip
                           align="center"
                           width="120">
            <template #default="scope">
              {{ scope.row.resideCityId }} {{ scope.row.resideAreaId }}
            </template>
          </el-table-column>
          <el-table-column prop=""
                           label="就职企业"
                           show-overflow-tooltip
                           align="left">
            <template #default="scope">
              {{ scope.row.childCompanyName ? scope.row.childCompanyName : scope.row.shortName}}
            </template>
          </el-table-column>
          <el-table-column prop="dispatchPosition"
                           label="就职岗位"
                           show-overflow-tooltip
                           align="center" />

          <!-- <el-table-column prop="linkName"
                           label="经纪人"
                           show-overflow-tooltip
                           align="center"
                           width="120" /> -->

          <!-- <el-table-column prop="inviteName"
                           label="推荐代理人"
                           width="160"
                           show-overflow-tooltip
                           align="center" /> -->
          <el-table-column prop="invitePhone"
                           label="上级手机号"
                           width="160"
                           show-overflow-tooltip
                           align="center" />
          <el-table-column prop="companyRemark"
                           label="离职原因"
                           width="160"
                           show-overflow-tooltip
                           align="center" />

        </el-table>

      </div>
      <div class="pagination">
        <el-pagination background
                       v-model:current-page="state.params.pageNum"
                       v-model:page-size="state.params.pageSize"
                       :page-sizes="[10, 20, 30, 50]"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="state.totalSize"
                       @size-change="methods.handleSizeChange"
                       @current-change="methods.handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, toRefs, defineComponent, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElLoading } from "element-plus";
import area from "@/utils/area.js";
const router = useRouter();
const app = getCurrentInstance()?.proxy;
const initState = () => {
  return {
    totalSize: 0,
    tableData: [
    ],
    loading: false,
    props: {
      checkStrictly: true,
      label: "value",
      value: "value",
    },
    params: {
      current: "",
      size: "",
      nameAndPhone: "",
      recommend: "",
      cityArr: "",
      time: "",
      pageNum: 1,
      pageSize: 10,
    },
    totalInputColumns: [
      { key: "nameAndPhone", label: "填写用户姓名/昵称/手机号", type: "input" },
      // { key: "linkName", label: "填写经纪人", type: "input" },
      { key: "inviteNameAndPhone", label: "上级手机号", type: "input" },
      { key: "cityArr", label: "选择所在城市", type: "select" },
      { key: "departTime", label: "选择离职时间", type: "time" },
    ],
    totalInputColumnsOption: {
      propsCity: [],
      positionType: [],
    },
  };
};
const state = reactive(initState());
onMounted(() => {
  let city = []
  area.forEach((res, key) => {
    city.push({
      code: res.code,
      value: res.value,
      children: [],
    })
    res.children.forEach(res1 => {
      city[key].children.push({
        code: res1.code,
        value: res1.value,
      })
    })
  })
  state.propsCity = city;
  methods.getDataList();
});
const methods = {
  handleAction (type, data) {
    switch (type) {
      case "export":
        break;
      case "import":
        break;
      case "query": //查询
        methods.getDataList()
        break;
      case "reset":
        state.params = initState().params;
        break;
      case "detail":
        break;

    }
  },
  getDataList () {
    if (state.params.cityArr?.length) {
      state.params.resideProvinceId = state.params.cityArr[0];
      state.params.resideCityId = state.params.cityArr[1];
      state.params.resideAreaId = state.params.cityArr[2];
    } else {
      state.params.resideProvinceId = "";
      state.params.resideCityId = "";
      state.params.resideAreaId = "";
    }
    state.loading = true
    app.$http.post("/sys/companystaff/dimission/records", state.params).then((res) => {
      res.data.list.forEach(data => {
        data.positionTypeData = app.$filter.positionType(data.positionTypeId)
      })
      state.tableData = res.data.list;
      state.totalSize = res.data.total;
      state.loading = false
    }).catch(() => {
      state.loading = false
    })
  },
  //分页变化
  handleSizeChange () {
    state.params.pageNum = 1;
    methods.getDataList();
  },
  //表格翻页
  handleCurrentChange () {
    methods.getDataList();
  },
};
</script>

<style lang="scss" scoped>
.appBox {
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  height: calc(100% - 20px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .tabaleBox {
    overflow: hidden;
    flex: 1;
  }
  .btnsDatil {
    color: #0079fe;
    cursor: pointer;
  }
  .pagination {
    margin-top: 20px;
    height: 50px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
